<template>
  <div :style="{height:height,backgroundColor:'#DAE3F3'}">
    <div class="profile__info">
      <div class="info__name">css-challenge-100day</div>
    </div>
    <div class="container">
      <div class="item" v-for="(obj,index) in this.urls" @click="clickMe(obj,index)">
        <div class="item_group">
          <span class="item_title">{{obj.title}}</span>
          <span class="item_day">Challenge{{index+1}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getClient} from "../../utils";

export default {
  name: "index",
  components: {},
  data() {
    return {
      urls: [
          {title:"001-100 Days CSS"},
          {title:"002-Menu Icon"},
          {title:"003-The Pyramide"},
          {title:"004-Loading"},
          {title:"005-Statistic"},
          {title:"006-Profile"},
      ],
      height: null
    };
  },
  methods:{
    clickMe(obj,index){
      const url = 'ChallengeDay'+(index+1)
      this.$router.push({name:url,params:{total:this.urls.length,index:index+1}})
    }
  },
  mounted() {
      console.log(getClient())
      this.height = getClient().height + 'px'
  }
}
</script>


<style lang="scss" scoped>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.profile__info{
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #DAE3F3;
  .info__name {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 30px;
    font-size: 15px;
    font-weight: 600;
  }
}
.container {
  display:grid;
  width: 100%;
  height: 1000px;
  background-color: #DAE3F3;
  grid-template-columns: repeat(auto-fill,150px);
  grid-template-rows:  repeat(auto-fill,150px);
  column-gap: 20px;
  row-gap: 20px;
  justify-content: center;
  align-content: center;
}
.item{
  border: 1px solid #6E2D9F;
  margin: 20px 0 0 20px;
  .item_group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #f5e8df;
    transition: all 0.4s ease-in-out;
    &:hover {
      cursor: pointer;
      background: #e1cfc2;
    }

    .item_title {
      color: #786450;
      font-size: 14px;
      font-weight: 600;
    }

    .item_day {
      color: #b09f90;
      text-transform: capitalize;
      font-size: 11px;
    }
  }
}
</style>